<template>
  <div>
    <div class="containerBox" v-for="item,index in resultList" :key="item.post_id">
      <div class="top">
        <div v-if="index<=2" class="tag">顶置</div>
        <h1 class="title" @click="toDetail(item.post_id)">{{item.title}}</h1>
      </div>
      <div class="center" v-html="item.content"></div>

      <div class="bottom">
        <div></div>
        <div class="time">{{item.user.username}} 发布于{{item.publish_time.replace("T",' ')}}</div>
      </div>
    </div>
    <div class="pagination">
      <span class="demonstration">共{{this.resData.pagination.total}}条</span>
      <el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange" :total="this.resData.pagination.total">
      </el-pagination>
    </div>
  </div>

</template>

<script>
import { watch } from 'vue'
import { getList } from '@/api/post'
export default {
  data() {
    return {
      resData: {
        sortNumber: 0,
        subjectId: '',
        pagination: {
          currentPage: '1',
          pageSize: '10',
          total: 0
        }
      },
      resultList: []
    }
  },
  methods: {
    toDetail(id) {
      this.$router.push({
        path: `/forumCenter/List/${id}`
      })
    },
    handleCurrentChange(val) {
      this.resData.pagination.currentPage = val
      this.getListFn()
    },
    getListFn() {
      getList(this.resData).then(res => {
        this.resultList = res.data.postList
        this.resData.pagination.total = res.data.pagination.total
      })
    }
  },
  mounted() {
    this.getListFn()
  },
  computed: {
    getSearchParms() {
      return this.$store.state.post.searchParms
    }
  },
  watch: {
    getSearchParms: {
      //nval改变后的新数据，oval改变前的旧数据
      handler(nval, oval) {
        this.resData = { ...this.resData, ...nval }
        this.getListFn()
      },
      deep: true // 深度监听
    }
  }
}
</script>

<style lang="less" scoped>
.containerBox {
  padding-top: 10px;
  border-bottom: 1px solid #cccccc;
  .top,
  // .center,
  .bottom {
    padding-bottom: 20px;
  }
  .center {
    color: #cccccc;
    margin-bottom: 20px;
    height: 60px;
    overflow: hidden;
  }
  .bottom {
    display: flex;
    justify-content: space-between;
  }
  .top {
    display: flex;
    align-items: center;
    .tag {
      padding: 0 8px;
      border-radius: 15px;
      background-color: @orange;
      color: @background_color;
    }
    .title {
      padding-left: 10px;
      &:hover {
        color: @blue;
        cursor: pointer;
      }
    }
  }
}
.pagination {
  padding-top: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
